<template>
  <div>
    <v-card>
      <v-tabs vertical slider-size="5" >
        <v-tab>
          <v-icon left>mdi-account</v-icon>基本信息
        </v-tab>
        <v-tab>
          <v-icon left>mdi-lock</v-icon>账号安全
        </v-tab>
        <v-tab-item>
          <v-card flat>
            <v-card-text>
              <!-- <v-switch v-model="formState" :label="formState ? '编辑' : '查看'"></v-switch> -->
              <v-form ref="form" v-model="valid" lazy-validation>
                <v-text-field :disabled="formState" dense v-model="info.name" outlined :counter="10" :rules="rules.nameRules" label="用户名" required></v-text-field>
              </v-form>
              <p>ua: {{uaData.ua}}</p>
              <p>browser(浏览器信息): {{uaData.browser}}</p>
              <p>engine(引擎): {{uaData.engine}}</p>
              <p>os(操作系统): {{uaData.os}}</p>
              <p>cpu: {{uaData.cpu}}</p>
            </v-card-text>
          </v-card>
        </v-tab-item>
        <v-tab-item>
          <v-card flat>
            <v-card-text>
              <p>Morbi nec metus. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nunc sed turpis.</p>

              <p>Suspendisse feugiat. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In hac habitasse platea dictumst. Fusce ac felis sit amet ligula pharetra condimentum.</p>

              <p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Nam commodo suscipit quam. In consectetuer turpis ut velit. Sed cursus turpis vitae tortor. Aliquam eu nunc.</p>

              <p>Etiam ut purus mattis mauris sodales aliquam. Ut varius tincidunt libero. Aenean viverra rhoncus pede. Duis leo. Fusce fermentum odio nec arcu.</p>

              <p
                class="mb-0"
              >Donec venenatis vulputate lorem. Aenean viverra rhoncus pede. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce commodo aliquam arcu. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.</p>
            </v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs>
    </v-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState("admin/ua", {
      uaData: "data",
    }),
    ...mapState('admin/user', [
      'info'
    ])
  },
  data: () => ({
    valid: true,
    formState: true,
    rules:{
      nameRules: [
        (v) => !!v || "用户名不能为空",
        (v) => (v && v.length <= 10) || "用户名不能超过10个字符",
      ],
    },
  }),
  created(){
  },
  methods: {
  },
};
</script>
<style lang="scss">
</style>